'use client'

import dynamic from 'next/dynamic'
import { Suspense } from 'react'
import { ChartSkeleton } from './ui/skeleton'

// 3D 场景骨架屏
function Viewer3DSkeleton() {
  return (
    <div className="w-full h-full bg-gray-100 rounded-lg flex items-center justify-center">
      <div className="text-center space-y-4">
        <div className="w-16 h-16 bg-gray-200 rounded-lg mx-auto"></div>
        <div className="space-y-2">
          <div className="h-4 bg-gray-200 rounded w-32 mx-auto"></div>
          <div className="h-3 bg-gray-200 rounded w-24 mx-auto"></div>
        </div>
      </div>
    </div>
  )
}

// 动态导入 3D 组件，禁用 SSR
const DynamicHospitalMapViewer = dynamic(
  () => import('./HospitalMapViewer').then(mod => ({ default: mod.default })),
  {
    loading: () => <Viewer3DSkeleton />,
    ssr: false, // 禁用服务端渲染
  }
)

// 动态导入其他 3D 相关组件
const DynamicAttractionMapViewer = dynamic(
  () => import('./attraction/AttractionMapViewer').then(mod => ({ default: mod.default })),
  {
    loading: () => <Viewer3DSkeleton />,
    ssr: false,
  }
)

// 3D 组件包装器
interface Dynamic3DViewerProps {
  type: 'hospital' | 'attraction'
  [key: string]: any
}

export function Dynamic3DViewer({ type, ...props }: Dynamic3DViewerProps) {
  const Component = type === 'hospital' ? DynamicHospitalMapViewer : DynamicAttractionMapViewer

  return (
    <Suspense fallback={<Viewer3DSkeleton />}>
      <Component {...props} />
    </Suspense>
  )
}

// 导出动态组件
export { DynamicHospitalMapViewer, DynamicAttractionMapViewer }
